<!--水军店铺-->
<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="店铺名" prop="shopName">
        <el-input
          v-model="queryParams.shopName"
          placeholder="请输入店铺名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入用户名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="success" plain size="mini" @click="handleEdit">添加商品</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="listList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column
        label="店铺"
        align="center"
        prop="shopName"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="用户"
        align="left"
        prop="userName"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="电话"
        align="center"
        prop="phone"
        width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="邮箱"
        align="center"
        prop="email"
        width="120"
        :show-overflow-tooltip="true"
      />
      <!--      <el-table-column label="状态" align="center" width="100" prop="status" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 0" >正常</el-tag>
          <el-tag v-if="scope.row.status == 1" type="success">待审批</el-tag>
          <el-tag v-if="scope.row.status == 2" type="info">待发合同</el-tag>
          <el-tag v-if="scope.row.status == 3" type="warning">关店申请</el-tag>
          <el-tag v-if="scope.row.status == 4" type="info">已关店</el-tag>
          <el-tag v-if="scope.row.status == -1" type="danger">审批不通过</el-tag>
        </template>
      </el-table-column>-->
      <el-table-column
        label="申请时间"
        align="center"
        prop="createTime"
        width="120"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{m}/{d}/{y}') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="max-operate-tab"
        width="180"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="handleLook(scope.row)"
            v-hasPermi="['user:list:edit']"
          >查看</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['user:list:edit']"
          >修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 查看信息 -->
    <el-dialog title="查看" :visible.sync="open1" width="900px" append-to-body>
      <el-descriptions class="margin-top" title :column="2" border>
        <el-descriptions-item>
          <template slot="label">用户编号</template>
          {{formLook.id}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">店铺名</template>
          {{formLook.shopName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">店铺头像</template>
          <oss-image-preview :src="formLook.shopAvatarUrl" :width="80" :height="80" />
          <!-- <ImagePreview :src="formLook.shopAvatarUrl" :width="60" :height="60" /> -->
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">店铺封面</template>
          <oss-image-preview :src="formLook.shopCoverUrl" :width="80" :height="80" />
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">审核状态</template>
          <el-tag v-if="formLook.status == 0">正常</el-tag>
          <el-tag v-if="formLook.status == 1" type="success">待审批</el-tag>
          <el-tag v-if="formLook.status == 2" type="info">待发合同</el-tag>
          <el-tag v-if="formLook.status == 3" type="warning">关店申请</el-tag>
          <el-tag v-if="formLook.status == 4" type="info">已关店</el-tag>
          <el-tag v-if="formLook.status == -1" type="danger">审批不通过</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">名称</template>
          {{formLook.userName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">电话</template>
          {{formLook.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">邮箱</template>
          {{formLook.email}}
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open1 = false">取消</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog title="修改店铺信息" :visible.sync="open2" width="950px" append-to-body>
      <el-form
        ref="formEdit"
        :model="formEdit"
        :rules="rules"
        label-position="left"
        label-width="75px"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺名" prop="shopName">
              <el-input class="modal-input" v-model="formEdit.shopName" placeholder="请输入店铺名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户名" prop="userName">
              <el-input class="modal-input" v-model="formEdit.userName" placeholder="请输入用户名" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="销量" prop="shopSalesVolume">
              <el-input
                type="number"
                class="modal-input"
                v-model="formEdit.shopSalesVolume"
                placeholder="请输入店铺销量"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="销售额" prop="shopSalesAmount">
              <el-input
                type="number"
                class="modal-input"
                v-model="formEdit.shopSalesAmount"
                placeholder="请输入店铺销售额"
              />
            </el-form-item>
          </el-col>
        </el-row>-->
        <!-- <ImageUpload :limit="1" v-model="form.url"></ImageUpload> -->
        <el-row>
          <el-col :span="12">
            <el-form-item label="店铺头像" prop>
              <!-- <el-input class="modal-input" v-model="formEdit.shopAvatarUrl" /> -->
              <ImageUpload :limit="1" v-model="formEdit.shopAvatarUrl"></ImageUpload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="店铺封面" prop>
              <ImageUpload :limit="1" v-model="formEdit.shopCoverUrl"></ImageUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input class="modal-input" v-model="formEdit.phone" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input class="modal-input" v-model="formEdit.email" placeholder="请输入邮箱" />
            </el-form-item>
          </el-col>-->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormEdit">确定</el-button>
        <el-button @click="cancelEdit(2)">取消</el-button>
      </div>
    </el-dialog>
    <!-- 添加商品-->
    <el-dialog
      title="添加商品"
      :visible.sync="openEdit"
      width="1000px"
      append-to-body
      @close="formPop={total:0,goodsNum:0};$refs['form'].resetFields()"
    >
      <el-form ref="form" :model="formPop" :rules="rules">
        <el-form-item label="已选择" prop="userIds">
          <div style="display: flex;flex-wrap: wrap;align-items: center">
            <div
              v-for="item in selectList"
              :key="item.id"
              style="padding-right: 10px"
            >{{item.shopName}}</div>
          </div>
        </el-form-item>
        <el-form-item
          label="每种商品数量"
          prop="total"
          :rules="[{required:true,message:'每种商品数量不能为空',trigger:['blur']}]"
        >
          <el-input-number v-model="formPop.total" label="请输入每种商品数量"></el-input-number>
        </el-form-item>
        <el-form-item
          label="商品数量"
          prop="goodsNum"
          :rules="[{required:true,message:'商品数量不能为空',trigger:['blur']}]"
        >
          <el-input-number v-model="formPop.goodsNum" label="请输入商品数量"></el-input-number>
        </el-form-item>
        <el-divider></el-divider>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确定</el-button>
        <el-button @click="openEdit = false;formPop={}">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { addProduct, shopList, shioEdit } from '@/api/navy/user'

export default {
  name: 'user',
  components: {},
  dicts: ['user_type', 'block_protocols', 'user_source'],
  data () {
    return {
      //离线时间筛选可选项
      statusList: [{ label: '离线1天', value: 1 }, { label: '离线3天', value: 3 }, {
        label: '离线7天',
        value: 7
      }, { label: '离线15天', value: 15 }],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户列表表格数据
      listList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        shopName: null,
        userName: null,
      },
      open1: false,
      open2: false,
      openEdit: false,
      //修改用户信息
      form: {
        count: null,
        names: null,
        addShop: '1',
        addAnchor: '1',
      },
      rules: {
        shopName: [{ required: true, message: "店铺名不能为空", trigger: "blur" }],
        userName: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
        phone: [{ required: true, message: "手机号不能为空", trigger: "blur" }],
        email: [{ required: true, message: "邮箱不能为空", trigger: "blur" }],
        shopSalesVolume: [{ required: true, message: "店铺销量不能为空", trigger: "blur" }],
        shopSalesAmount: [{ required: true, message: "店铺销售额不能为空", trigger: "blur" }],
      },
      selectList: [],
      avatarNum: 1,
      formEdit: {},
      formPop: {
        total: 0,
        goodsNum: null,
        shopId: [],
      },
      formLook: {},
      edit: 'fund',
    }
  },
  created () {
    this.getList()
  },
  methods: {
    /** 查询用户列表列表 */
    getList () {
      this.loading = true
      shopList(this.queryParams).then(response => {
        this.listList = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        shopName: null,
        userName: null,
      }
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      console.log(selection)
      this.selectList = selection
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
      this.avatarNum = selection.length
    },
    // 操作修改
    handleUpdate (row) {
      this.open2 = true
      this.formEdit = JSON.parse(JSON.stringify(row))
    },
    // 重置新增表单
    reset () {
      this.form = {
        count: null,
        names: null,
        addShop: '1',
        addAnchor: '1',
      }
    },
    //检查已选数据
    checkUser: function () {
      if (!this.ids.length) {
        this.$modal.msgError("请先选择需要添加的水军店铺！")
        return false
      } else {
        return true
      }
    },
    handleLook (row) {
      console.log(row)
      this.open1 = true
      this.formLook = JSON.parse(JSON.stringify(row))
    },
    // 取消新增
    cancel (type) {
      if (type == 1) this.open1 = false
      if (type == 2) this.open2 = false
      if (type == 3) this.open3 = false
      this.reset()
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formPop.id != null) {
            updateList(this.formPop).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.openEdit = false
              this.getList()
            })
          } else {
            this.formPop.shopId.push(this.selectList.map(item => item.id))
            this.formPop.shopId = this.formPop.shopId[0]
            addProduct(this.formPop).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.openEdit = false
              this.getList()
            })
          }
        }
      })
    },
    /** 重置修改表单 */
    resetFormEdit () {
      this.formEdit = {}
    },
    /** 修改点击 */
    handleEdit () {
      if (this.checkUser()) {
        this.resetFormEdit()
        this.openEdit = true
      }
    },
    // 取消修改
    cancelEdit () {
      this.open2 = false
      this.resetFormEdit()
      this.$refs["formEdit"].resetFields()
      this.$refs["formEdit"].clearValidate()
    },
    /** 提交修改*/
    submitFormEdit () {
      /*        * 小店id
            private Long id;
             * 姓名
            private String name;
             * 小店名
            private String shopName;
             * 电话
            private String phone;
             * 邮箱
            private String email; */

      this.$refs["formEdit"].validate(async valid => {
        if (valid) {
          shioEdit(this.formEdit).then(res => {
            if (res.success) {
              this.$modal.msgSuccess("修改成功")
              this.cancelEdit()
              this.getList()
            }
          })
        }
      })
    },
  }
}
</script>
